import React, { Component } from "react";

class SyntheticBaseEvent extends Component {
    // 类似于 SyntheticBaseEvent.prototype.handle1 = function handle1() {}
    handle1(x, y) {
        console.log(this);
    };
    
    // 通过bind调用，ev 不用传
    handle2(x, y, ev) {
        console.log(this, x, y);
    };

    handle3 = (ev) => {
        // ev: SyntheticBaseEvent合成事件对象，【react内部经过特殊处理，把各个浏览器的事件对象统一化后，构建的一个事件对象】
        /*
            合成事件对象中包含浏览器内置事件对象中的一些属性和方法（常用的都有）
                clientX/clientY
                pageX/pageY
                target
                type
                preventDefault
                stopPropagation
                ...
                nativeEvent: 基于这个属性，可以获取浏览器内置事件对象
        */

        console.log('合成事件对象---------------', ev); 
        console.log(this);
    };

    handle4 = (x, y, ev) => {
        console.log(this, x, y, ev)
    };
    render() {
        return (
            <>
                <button onClick={this.handle1}>按钮1</button>
                <br />
                
                {/* <button onClick={() => {
                    this.handle2(1, 2);
                }}>按钮2</button> */}
                <button onClick={this.handle2.bind(this, 1, 2)}>按钮2</button>
                <br />

                <button onClick={this.handle3}>按钮3</button>
                <br />

                <button onClick={this.handle4(null, 10, 20)}>按钮4</button>
            </>
        )
    };
};

export default SyntheticBaseEvent;
/*
    合成事件：SyntheticBaseEvent
         react中，在jsx元素上基于onXxx = {函数}进行绑定的事件,合成事件是react对浏览器原生事件的封装，
         它提供了一致的跨浏览器行为，并且具有一些额外的特性
*/

/*
    ev.stopPropagation 合成事件对象阻止事件传播的时候，阻止原生的事件传播 也 阻止合成事件中的事件传播
    ev.nativeEvent.stopProgation 原生事件对象中中的“阻止事件传播”，只能阻止原生事件的传播
*/